<template>
    <div class="app_box">
        <div class="app_box_bg">
            <div class="bbs_title">留言板</div>
            <div class="bbs_box">
                <div class="bbs_text">
                    <mt-field :attr="{ maxlength: 200 }" placeholder="请留下您的意见，每条我们都会认真阅读。" type="textarea" rows="4" v-model.trim="userText"></mt-field>
                </div>
                <div class="bbs_info">
                    <div class="bbs_tips">还可以输入
                        <span>{{200-userText.length}}</span>字</div>
                    <div class="bbs_btn">
                        <mt-button type="primary" size="small" @click="onSubmit">提交留言</mt-button>
                    </div>
                </div>
            </div>
            <!-- list -->
            <div class="list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="44">
                <div class="list_title">看看大家说什么</div>
                <div class="list_box">
                    <div class="list_item" v-for="item in list">
                        <div class="list_info">
                            <div class="list_name">用户{{item}}</div>
                            <div class="list_time">2018-04-03 12:12:12</div>
                        </div>
                        <div class="list_text">我爱山中春，苍崖鸟一声。桃花源里住，罕见问津人。我爱山中夏，空冥花雨下。行吟屐齿肥，树色丽四野。</div>
                        <div class="list_reply">
                            <div class="list_info">
                                <div class="list_name">小编回复</div>
                                <div class="list_time">2012-22-22 11:11:11</div>
                            </div>
                            <div class="list_text">我爱山中秋，黄云稻正稠。铎声连振起，镰子刈禾头。我爱山中冬，冰澌叠乱封。地炉无品字，一榻冷千峰。</div>
                        </div>
                    </div>
                    <!-- loading -->
                    <div class="loading" v-show="isLoading">
                        <mt-spinner :type="3" color="#26a2ff" :size="20"></mt-spinner>
                        <div class="loading_name">加载中···</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast,MessageBox } from 'mint-ui';
export default {
    name: 'bbs',
    data() {
        return {
            loading: false,
            list: [],
            userText: '',
            isLoading: false
        }
    },
    methods: {
        // 提交数据
        onSubmit(){
            const userText = this.userText;
            if(!userText){
                Toast('留言内容不能为空!');
                return false;
            }
            MessageBox('留言内容', userText);
        },
        // 加载更多数据
        loadMore() {
            this.loading = true
            this.isLoading = true
            const last = this.list.length
            setTimeout(() => {
                for (let i = 1; i <= 4; i++) {
                    this.list.push(last + i)
                }
                this.loading = false
                this.isLoading = false
            }, 1000)
        }
    },
    created() {}
}
</script>
<style scoped>
@import url('./base.css');
</style>
